<template >
  <div style="">
    <el-button type="primary" class="back" icon="el-icon-arrow-left" @click="rollback()">返回</el-button>
    <div class="goodsBox">
      <div class="goodsBox-img">
        <el-image
          style="position: absolute;width: 500px; height: 600px;left: 0px;border-radius: 14px;"
          :src="$route.query.goodsImg"
          :preview-src-list="srcList">
        </el-image>
        <div class="goodsBox-store">
          <!--星级评定-->
          <el-rate
            v-model="value"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </div>
        <div class="goodsBox-btn">
         <br><br>
          <h1>{{$route.query.goodsName}}</h1><br>
          <p>讨人喜爱的面庞，长而华丽的背毛，优雅的举止，故有"猫中王子"、"王妃"之称，是世界上爱猫者最喜欢的纯种猫之一，尽显尊贵。</p>
          <br>
          <h2><p style="color: #777777">{{$route.query.goodsDesc}}</p></h2>
          <br>
          <h2><span style="color: #777777">配种收费&ensp;</span><span style="color: #e4393c;font-family: simsun">&yen;<span></span>{{$route.query.goodsPrice}}</span></h2>
          <br><br>
    
          <el-button size="medium" type="danger" @click="add1">预约配种</el-button>
          <p style="color: #777777">温馨提示：请在预约后2天内到店</p>
        </div>
      </div>
    </div>
    <hr />
<!--    详情图片-->
    <div class="goodsDescImg" id="goodsDescImg" style="text-align: center;margin-top: 100px">
      <h1 style="color: #777777">猫猫详情</h1><br><br><br>
      <el-image v-for="url in srcList" :key="url" :src="url"></el-image>
    </div>
  </div>
</template>

<script>
    export default {
        name: "goodsDesc",
        data() {
          return {
            num: 1,
            value: 4.7,
            // money:599.00,
            // prize:599.00,
            sum:65,
            goodsId:'0',
            //隐形窗口
            ishow: false,
            current: 0,

            //按钮点击限制
            add1_can_press : true,
            err_can_press : true,

            //商品详情
            imgUrl: 'http://n.sinaimg.cn/sinacn/w461h517/20171215/ff54-fypsqka0066633.jpg',
            srcList: [
              'https://img.alicdn.com/imgextra/i4/1839279765/O1CN01XiuhwU2M0QECBjNES_!!1839279765.png',
              'https://img.alicdn.com/imgextra/i2/1839279765/O1CN01H9cPX82M0QEDVyZny_!!1839279765.jpg',
              'https://img.alicdn.com/imgextra/i1/1839279765/O1CN01J0iMZw2M0QECPNObN_!!1839279765.png',
              'https://img.alicdn.com/imgextra/i2/1839279765/O1CN0187uuE72M0QGInmQbF_!!1839279765.jpg',
            ],
  
          };
        },
        // created() {
        //   if (this.$route.query.goods==null) {
        //     this.$router.push('/goodsDesc');
        //   }
        //   this.goodsId = this.$route.query.goods;
        //   this.getdate();
        // }
        // ,
        methods: {
          //数据更新
          getdate() {

          },
          //返回上一级
          rollback(){
            this.$router.push({
            path: "/doc/2",
            });
          },
          //预约
          add1() {
            if(this.add1_can_press==true)
            {
              this.$notify({
                title: '预约配种',
                message: '已成功预约',
                type: 'success'
              });
              this.add1_can_press = false;
              setTimeout(()=>{
                this.add1_can_press = true;
              },2000)
            }else if(this.err_can_press==true){
              this.$notify.error({
                title: '错误',
                message: '请求过于频繁，2秒后重试'
              });
              this.err_can_press = false;
              setTimeout(()=>{
                this.err_can_press = true;
              },1000)
            }
          },
        }

    }
</script>

<style scoped>
  .back{
    float: left;
  }
  .goodsBox {
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);*/
    /*background: #F2F8FE;*/
    position: relative;
    width:1400px;
    height: 800px;
    margin: 0 auto;
    text-align: center;
  }

  .goodsBox-img {
    position: absolute;
    top: 5%;
    left: 15%;
    width: 75%;
    height: 75%;
    /*background-color: #409EFF;*/
     /*text-align: center; */
    /* vertical-align: middle; */
  }
  .goodsBox-btn {
    position: absolute;
    top: 5%;
    left: 55%;
    width: 40%;
    height: 20%;
    /*background-color: #409E1F;*/
     text-align: center;
     vertical-align: middle;
  }
  .goodsBox-store {
    position: absolute;
    top: 5%;
    left: 45%;
    width: 30%;
    height: 20%;
    /*background-color: #409E1F;*/
     text-align: center;
     vertical-align: middle;
  }

  /**
  卡片
   */

  .card{
    height: 170px;
    width: 170px;
    margin-left: 30px;
    margin-top: 30px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 4px;
    float: left;
  }
  .card img {
    width: 100%;
    height: 100%;
  }
  .card span {
    font-size: 15px;
    color: #BFBFBF;
    display: block;
    letter-spacing: 2px;
    /*padding: 0px 20px;*/
  }
  /**
隐藏页
*/
  .handleDialog {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
  }
  /**
丝带
 */

  .ribbon {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    margin-bottom: 30px;
    background-size: cover;
    text-transform: uppercase;
    color: white;
  }
</style>
